<template>
  <div class="grouptable">
    <!-- 标题 -->
    <div v-if="title" class="title">{{ title }}</div>
    <!-- 表头 -->
    <div
      class="items-center"
      style="background-color: #c3e0ff"
      :style="{
        'justify-content': header?.length === 1 ? 'center' : '',
        'text-align': header?.length === 1 ? 'center' : '',
        'font-weight': header?.length === 1 ? '590' : '400',
      }"
    >
      <div
        class="header"
        :class="[headerClass]"
        v-for="(h, y) in header"
        :key="y"
        :style="{
        width: colColorIdx === y+ 1?'85px':`calc(${100/(cols!.length-1)}% - ${85/(cols!.length-1)}px)`,
        
        'border-right': y + 1 === header?.length ? '' : '1px solid #B0D6FF'
      }"
      >
        {{ h }}
      </div>
    </div>

    <!-- 表格内容 -->
    <div class="content items-center">
      <div
        class="content-col"
        v-for="(l, x) in cols"
        :key="x"
        :style="{ width: colColorIdx === x + 1?'85px':`calc(${100/(cols!.length-1)}% - ${85/(cols!.length-1)}px)` }"
      >
        <!-- 列 -->
        <div
          v-for="(c, i) in l.list"
          :key="i"
          class="content-col-item items-center"
          :style="{
            height: `${colHeight}px`,
            color: colColorIdx === x + 1 ? '#007BFF' : '#002853',
            'text-align': x === 0 ? 'left' : 'center',
            'justify-content': x === 0 ? 'flex-start' : 'center',
            'border-bottom':
              i + 1 === l.list?.length ? '' : '1px solid #E8EAF0',
            'border-right': x + 1 === cols?.length ? '' : '1px solid #E8EAF0',
          }"
        >
          <div
            class="content-col-text"
            :style="{
              'font-size': colColorIdx === x + 1 ? '10px' : '13px',
              'word-break': 'break-word',
            }"
            v-html="c"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="grouptable" lang="ts">
import { createVNode } from "vue";
// 属性
const props = withDefaults(
  defineProps<{
    title: string;
    header?: any[];
    cols?: any[];
    colColorIdx?: number;
    headerClass?: string;
    colHeight?: number;
  }>(),
  {
    title: "",
    headerClass: "",
  }
);

const lineNUm = computed(() => {
  return (props.colHeight || 0) > 25 ? 2 : 1;
});
</script>
<style lang="scss" scoped>
.grouptable {
  .title {
    text-align: center;
    color: #141924;
    font-size: 13 * 2px;
    font-weight: 590;
    height: 30 * 2px;
    line-height: 30 * 2px;
    background-color: #fff;
  }

  .header {
    @include multi-line-omit(1);
    color: #007bff;
    text-align: center;
    font-size: 13 * 2px;
    height: 30 * 2px;
    line-height: 30 * 2px;
  }
  .header-size {
    font-size: 11 * 2px;
  }

  .content {
    &-col {
      &-item {
        padding: 0 8 * 2px;
        height: 34 * 2px;
        // line-height: 34 * 2px;
        background-color: #f4f9ff;
      }
      &-text {
        @include multi-line-omit("v-bind(" lineNUm ")");
        font-size: 13 * 2px;
      }
    }
  }
}
</style>
